<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>将军的爱心</title>
		<style>
			div{/*块元素 可设宽高 独占一行*/
				width: 400px;
				height: 400px;
				background-color:#f00606;
				margin: 200px auto ;
				transform: rotate(-135deg);
				/*光晕  滤镜--下阴影 */
				filter: drop-shadow(0 0 60px #ff003b);
				animation: heart 1s linear infinite;/*启动部分 animation+名称+过渡时间+linear+infinite(无限)*/
			}
			div:after{
				content: "";/*行内元素 不可设置宽高 一行内显示*/
				display: block;/*转换块元素*/
				width: 400px;
				height: 400px;
				background-color: #f00606;
				border-radius: 50%;
				position: relative;
				left: 200px;
				top:-400px;
				}
			div:before{
				content: "";/*行内元素 不可设置宽高 一行内显示*/
				display: block;/*转换块元素*/
				width: 400px;
				height: 400px;
				background-color: #f00606;
				border-radius: 50%;
				position: relative;
				top: 200px;
				}
			@keyframes heart{
				0%{
					transform: rotate(-135deg) scale(1.2);
				}
				50%{
					transform: rotate(-135deg) scale(1);
				}
				100%{
					transform: rotate(-135deg) scale(0.8);
				}
				
			}
		</style>
	</head>
	<body>
		<div></div>
	</body>
</html>